<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8" />
	<title></title>
	<link rel="stylesheet" type="text/css" href="/css/element/index.css" />
	<script src="/js/vue.js" type="text/javascript" charset="utf-8"></script>
	<script src="/js/axios.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="/js/element/index.js" type="text/javascript" charset="utf-8"></script>
	<script src="/js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="/ajax/libs/layer/layer.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="/common/js/ms-ui.js" type="text/javascript" charset="utf-8"></script>
</head>
<style type="text/css">
	html {
		background: #fff;
	}

	[v-cloak] {
		display: none;
	}

	#app {
		margin: -10px auto;
	}

	.del {
		margin: 5px 0;
	}

	.el-table .cell {
		white-space: nowrap;
	}

	.block {
		margin: 5px 50px;
	}

	.el-table {
		font-size: 11px;
	}

	.imgs {
		width: 20px;
		height: 20px;
		margin: -7px 0px;
	}

	.basic {
		background: rgb(245, 245, 245);
		border: 1px solid rgb(200, 207, 218);
		padding: 5px 0;
	}

	.single {
		display: flex
	}

	.single>a {
		text-decoration: none;
		color: #2C4A77;
		margin: 0 10px
	}

	.single>a:hover {
		text-decoration: underline;
	}

	#fileList {
		background: #F2F2F2;
		padding-bottom: 1px;
	}

	.file {
		background: #fff;
		margin: 10px 2px;
	}

	#app {
		margin: -10px auto;
	}

	.el-table .cell {
		white-space: nowrap;
	}

	.block {
		margin: 5px 50px;
	}

	.el-table {
		font-size: 12px;
		width: 98%;
		margin: 20px auto;
	}

	.work_table thead {
		color: #676a6c;
		font-size: 13px;
		font-weight: normal !important;
	}

	.work_table thead:hover {
		background-color: #eff3f8;
	}

	.el-table th {
		background-color: #eff3f8;
	}

	.el-table tr:hover {
		background-color: #f5f5f5;
	}

	.hover-row {
		background-color: #f5f5f5 !important;
	}

	th {
		font-weight: normal !important;
	}

	.el-table td,
	.el-table th {
		padding: 8px 0;
	}

	::-webkit-scrollbar {
		width: 6px;
		background-color: #F5F5F5;
	}

	::-webkit-scrollbar-track {
		background-color: #F5F5F5;
	}

	::-webkit-scrollbar-thumb {
		background-color: #999;
	}
</style>

<body>
	<div id="app">
		<div id="detailHead" v-if="isOpen" v-cloak>
			<el-button size="mini" style="margin: 5px 20px" plain @click="block">返回</el-button>
			<div class="basic" v-cloak>
				<div class="title" style="font-weight:900;padding-left: 20px;font-size: 14px;">
					{{ detail.subject }}
				</div>
				<table border="0" cellspacing="0" cellpadding="0" id="tbSenderOption">
					<tbody>
						<tr>
							<td style="padding-left: 20px;font-size: 14px;" class="settingtable txt_left">
								<span class="addrtitle"
									style="color: #7f7f7f;">发件人：</span><span>{{ detail.from_name }}</span><span
									style="color: #7f7f7f;">
									<{{ detail.from_address }}>;
								</span>
							</td>
						</tr>
					</tbody>
				</table>
				<table border="0" cellspacing="0" cellpadding="0" id="tbSenderOption">
					<tbody>
						<tr>
							<td style="padding-left: 20px;font-size: 14px;" class="settingtable txt_left">
								<span class="addrtitle" style="color: #7f7f7f;">时 间：</span><span
									style="color: #7f7f7f;">{{ detail.send_date }}</span>
							</td>
						</tr>
					</tbody>
				</table>
				<table border="0" cellspacing="0" cellpadding="0" id="tbSenderOption">
					<tbody>
						<tr>
							<td style="padding-left: 20px;font-size: 14px;" class="settingtable txt_left"
								v-for="i in detail.to" :key="i.id">
								<span class="addrtitle" style="color: #7f7f7f;">收件人：
								</span>
								<span>{{ i.name }}</span>
								<span style="color: #7f7f7f;">
									<{{ i.address }}>;
								</span>
							</td>
						</tr>
					</tbody>
				</table>
				<table border="0" cellspacing="0" cellpadding="0" id="tbSenderOption">
					<tbody>
						<tr>
							<td style="padding-left: 20px;font-size: 14px;" class="settingtable txt_left"
								v-for="c in detail.cc" :key="c.id">
								<span class="addrtitle" style="color: #7f7f7f;">抄 送：
								</span>
								<span>{{ c.name }}</span>
								<span style="color: #7f7f7f;">
									<{{ c.address }}>;
								</span>
							</td>
						</tr>
					</tbody>
				</table>
				<table border="0" cellspacing="0" cellpadding="0" id="tbSenderOption">
					<tbody>
						<tr>
							<td style="padding-left: 20px;font-size: 14px;" class="settingtable txt_left"
								v-for="b in detail.bcc" :key="b.id">
								<span class="addrtitle" style="color: #7f7f7f;">密 送：
								</span>
								<span>{{ b.name }}</span>
								<span style="color: #7f7f7f;">
									<{{ b.address }}>;
								</span>
							</td>
						</tr>
					</tbody>
				</table>
				<table border="0" cellspacing="0" cellpadding="0" id="tbSenderOption"
					v-show="detail.attachment.length!=0">
					<tbody>
						<tr>
							<td style="padding-left:20px; font-size: 14px" class="settingtable txt_left" v-cloak>
								<span class="addrtitle" style="color: #7f7f7f;">附 件：
								</span>
								<span>{{ detail.attachment.length }}个</span>
								<span v-for="item in detail.attachment" :key="item.id" style="color: #7f7f7f;">(<a
										href="#fileList">{{ item.name }}</a>)</span>
							</td>
						</tr>
					</tbody>
				</table>
			</div>
			<div v-html="detail.content[0].content"></div>
			<div id="fileList" v-show="detail.attachment.length!=0" v-cloak>

				<div class="fileNumber"><span class="addrtitle" style="color: #7f7f7f;">附 件：
					</span>
					<span>（{{ detail.attachment.length }}个）</span></div>


				<div class="file" v-for="item in detail.attachment" :key="item.id">
					<div class="single">
						<div v-if="item.SuffixName=='.doc' || item.SuffixName=='.docx'"><img src="/imgs/fu_doc.gif">
						</div>
						<div v-else-if="item.SuffixName=='.pptx' || item.SuffixName=='.ppt'"><img
								src="/imgs/fu_ppt.gif"></div>
						<div v-else-if="item.SuffixName=='.xlsx' || item.SuffixName=='.xls'"><img
								src="/imgs/fu_exl.gif"></div>
						<div v-else><img src="/imgs/fu_txt.gif"></div>
						<div>{{item.name}}</div>
						<a :href="'/xman/etlMailRecv/fileDownload?fileName='+item.id+'&originalName='+item.name">下载</a>
					</div>

				</div>
			</div>
		</div>

		<div class="mailList" v-else>
			<el-table v-loading="loading" ref="multipleTable" :show-overflow-tooltip="false" class="work_table"
				id="mailInfo" @row-click="toInfo" :data="tableData" tooltip-effect="dark">
				<el-table-column width="30" v-cloak><img class="imgs" src="/imgs/mail.png" alt="" /></el-table-column>
				<el-table-column prop="from_name" label="发件人"> </el-table-column>
				<el-table-column prop="subject" label="主题"> </el-table-column>
				<el-table-column prop="send_date" label="时间"> </el-table-column>
			</el-table>
		</div>
	</div>
</body>
<script>
	new Vue({
		el: "#app",
		data: {
			isOpen: false,
			detail: {},
			tableData: [],

			loading: true
		},
		created() {
			this.getList();
		},
		methods: {
			getList() {
				axios
					.post("/xman/etlMailRecv/list")
					.then(response => {
						this.tableData = response.data.data;
						console.log("this.tableData", this.tableData);
						for (let i = 0; i < this.tableData.length; i++) {
							const item = this.tableData[i];
							item.send_date = this.timeChange(item.send_date);
						}
						this.loading = false;
					})
					.catch(function (error) {
						console.log(error);
					});
			},

			timeChange(time) {
				var item = new Date(time);
				return (
					item.toLocaleDateString().replace(/\//g, "-") +
					" " +
					item.toTimeString().substr(0, 8)
				);
			},
			block() {
				this.isOpen = false;
			},
			toInfo(row) {
				this.detail = row;
				if (this.detail.attachment.length != 0) {
					for (let i = 0; i < this.detail.attachment.length; i++) {
						const file = this.detail.attachment[i];
						var filename = file.name;
						var index1 = filename.lastIndexOf(".");
						var index2 = filename.length;
						var postf = filename.substring(index1, index2);
						file.SuffixName = postf
						file.id = encodeURI(file.id)
						file.name = encodeURI(file.name)
						console.log('file', file)
					}
				}

				this.isOpen = true;
			},

			removal(array) {
				var temp = []; //一个新的临时数组
				for (var i = 0; i < array.length; i++) {
					if (temp.indexOf(array[i]) == -1) {
						temp.push(array[i]);
					}
				}
				return temp;
			}
		}
	});
</script>

</html>